<%@ page pageEncoding="utf-8" language="java"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html:html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<html:base/>
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/styles/jquery.datePicker.css" type="text/css"/>
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/styles/style1.css" type="text/css" />
	<title>Accounts 編輯頁</title>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.validate.min.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/custom.validate.methods.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.metadata.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/date.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.datePicker.js"></script>
	<script type="text/javascript">
	/**
	 * decorate datePicker on every _date and Key/Data area disable
	 */
	$(function() {
		$("#mainForm").validate({
			meta: "validate",
			messages:{
				'vo.username':{
					required:"請輸入登入帳號",
					username:"字母數字下劃線"
				},
				'vo.name_tw':{
					required:"請輸入姓名"
				},
				'vo.email':{
					email:'電子郵件格式有誤'
				},
				'vo.login_err_top':{
					integer:'請輸入有效數字'
				}				
			},
			submitHandler: function(form) {
				var op = $("input[name='op']").val();
				if(op == 'insert'){
					var username=$("#username").val();
					$.post(
					    "<c:out value="${ctx}"/>/ajaxValidateAccount.do?i="+Math.random(),
					    {username:username}, 
						function(data){
					    	if(data == "OK"){ 
					    		document.mainForm.submit();
					    	}else{
						    	var userCompent = $("#username");
						    	$(userCompent).addClass("error");
						    	$(userCompent).parent().append('<label for="vo.username" generated="true" class="error">'+data+'</label>')
					    	}
						} 
					);					
				}else{
					document.mainForm.submit();
				}
			}
		});
		
		Date.format = 'yyyy/mm/dd';
		$('td input[name$="_date"]').datePicker({startDate:'1996-01-01'});
		$('td input[name$="_date"]').each(function() {
			if ($(this).val().length > 10) {
				$(this).attr('value', $(this).val().substring(0, 10));
			}
		});
		// Area update
		$('td input[name^="vo"]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="data" />');
		$('td select[name^="vo"]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="data" />');
		// $('td input[name="vo.id"]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="key" />');
		$('td input[name="vo.id"]').attr('disabled', 'disabled');
		
		if('update'=='<bean:write name="lazyForm" property="op"/>'){
			$("#username").attr("readonly","readonly");
		}

	});
	</script>
</head>
<body>
<form id='mainForm' name='mainForm' action='<c:out value="${ctx}"/>/saveAccount.do' method="post">
	<html:hidden property="op" name="lazyForm"/>
	<div id="DataArea">
	<table width="100%" border="0">
		<tr>
			<th class="th" colspan="2" ><bean:write property="op" name="lazyForm"/> </th>
		</tr>
		<tr>
			<td class="title">ID</td>
			<td class="one">
			<html:text styleId="id" name="lazyForm" property="vo.id" size="20" />
			</td>
		</tr>
		<tr>
			<td class="title">登入帳號</td>
			<td class="one">
			<html:text styleClass="{validate:{required:true,username:true}}" styleId="username" name="lazyForm" property="vo.username" size="20"/>
			</td>
		</tr>
		<tr>
			<td class="title">姓名</td>
			<td class="one">
			<html:text styleClass="{validate:{required:true}}" styleId="name_tw" name="lazyForm" property="vo.name_tw" size="20"/>
			</td>
		</tr>
		<tr>
			<td class="title">英文姓名</td>
			<td class="one">
			<html:text styleId="name_en" name="lazyForm" property="vo.name_en" size="20"/>
			</td>
		</tr>
		<tr>
			<td class="title">電子郵件帳號</td>
			<td class="one">
			<html:text styleClass="{validate:{email:true}}" styleId="email" name="lazyForm" property="vo.email" size="20"/>
			</td>
		</tr>
		<tr>
			<td class="title">帳號開啟日期</td>
			<td class="one">
			<html:text styleId="effective_start_date" name="lazyForm" property="vo.effective_start_date" size="10"/>
			</td>
		</tr>
		<tr>
			<td class="title">帳號關閉日期</td>
			<td class="one">
			<html:text styleId="effective_end_date" name="lazyForm" property="vo.effective_end_date" size="10"/>
			</td>
		</tr>
		<tr>
			<td class="title">鎖定起始日期</td>
			<td class="one">
			<html:text styleId="lock_start_date" name="lazyForm" property="vo.lock_start_date" size="10"/>
			</td>
		</tr>
		<tr>
			<td class="title">鎖定解除日期</td>
			<td class="one">
			<html:text styleId="lock_end_date" name="lazyForm" property="vo.lock_end_date" size="10"/>
			</td>
		</tr>
		<tr>
			<td height="22" class="title">啟動旗標</td>
			<td class="one">
				<html:select styleId="enable_flag" name="lazyForm" property="vo.enable_flag">
					<html:option value="Y">是</html:option>
					<html:option value="N">否</html:option>
				</html:select>
			</td>
		</tr>
		<tr>
			<td class="title">登入錯誤上限</td>
			<td class="one">
			<html:text styleClass="{validate:{integer:true}}" styleId="login_err_top" name="lazyForm" property="vo.login_err_top" size="5"/>
			</td>
		</tr>
		<tr>
			<td class="title">登入錯誤次數</td>
			<td class="one">
			<html:text readonly="readonly" styleId="login_err_num" name="lazyForm" property="vo.login_err_num" size="5"/>
			</td>
		</tr>
		<tr>
			<td height="22" class="title">登入狀態</td>
			<td class="one"  >
				<html:select styleId="login_flag" name="lazyForm" property="vo.login_flag">
					<html:option value="Y">是</html:option>
					<html:option value="N">否</html:option>
				</html:select>
			</td>
		</tr>
	</table>
	</div>
	<div id="send">
		<input type="submit" name="save" id="save" value=" 儲存" />
		<input type="button" name="back" id="back" value="上一頁" onclick="history.go(-1);" />
	</div>
</form>
</body>
</html:html>